<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无用之木的文章 | AI工程师的长期主义创作之路</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .article-card {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
        }
        .article-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .category-tag {
            transition: all 0.2s ease;
        }
        .category-tag:hover {
            transform: scale(1.05);
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #0ea5e9;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .mobile-menu.active {
            max-height: 500px;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="./src/assets/WLA-logo.png" alt="Logo" class="h-10 mr-4">
                    <h1 class="text-2xl font-bold text-gray-800">无用之木的文章</h1>
                </div>
                <button id="mobileMenuButton" class="md:hidden text-gray-600">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <nav class="hidden md:flex space-x-8">
                    <a href="./index.html" class="nav-link text-gray-600 hover:text-sky-500">首页</a>
                    <a href="#articles" class="nav-link text-gray-600 hover:text-sky-500">文章</a>
                    <a href="#creator-system" class="nav-link text-gray-600 hover:text-sky-500">创作系统</a>
                </nav>
            </div>
            <!-- Mobile Menu -->
            <div id="mobileMenu" class="mobile-menu md:hidden mt-4">
                <div class="flex flex-col space-y-3">
                    <a href="./index.html" class="text-gray-600 hover:text-sky-500 py-2">首页</a>
                    <a href="#articles" class="text-gray-600 hover:text-sky-500 py-2">文章</a>
                    <a href="#creator-system" class="text-gray-600 hover:text-sky-500 py-2">创作系统</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-12">
        <!-- Introduction -->
        <section class="mb-16 hero-gradient rounded-xl p-8">
            <div class="max-w-3xl mx-auto text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">我的文章与思考</h2>
                <p class="text-lg text-gray-600">
                    作为一名AI工程师出身的长期主义创作者，我专注于探索三个核心问题：
                    <strong>写作如何成为思考、连接与变现的工具</strong>、<strong>投资和人生的长期主义路径</strong>、
                    以及<strong>如何打造属于自己的在线资产</strong>。
                </p>
            </div>
            <div class="max-w-3xl mx-auto text-center">
                <p class="text-gray-600 mb-6">
                    在这里，你将找到关于写作系统搭建、长期主义投资思维、AI技术应用、创作变现策略等实用文章。
                    这些内容都是我在构建「复利型创作系统」过程中的思考与实践总结。
                </p>
                <div class="flex flex-wrap justify-center gap-2 text-sm">
                    <span class="bg-sky-100 text-sky-700 px-3 py-1 rounded-full">#长期主义</span>
                    <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full">#写作系统</span>
                    <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full">#在线资产</span>
                    <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full">#创作变现</span>
                </div>
            </div>
        </section>

        <!-- All Articles Section -->
        <section id="articles" class="mb-20">
            <div class="max-w-4xl mx-auto">
                <h3 class="text-2xl font-bold text-gray-800 mb-8">按主题浏览文章</h3>
                <p class="text-gray-600 mb-8">选择你感兴趣的主题，深入了解我的思考与实践。</p>
                
                <!-- 写作系统 -->
                <div class="mb-12">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
                            <i class="fas fa-pen-nib"></i>
                        </div>
                        <h4 class="text-xl font-semibold text-gray-800">写作系统</h4>
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">如何搭建一个可复利的写作系统</h5>
                            <p class="text-sm text-gray-500">从零开始构建属于自己的创作资产库</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">Notion写作工作流：我的内容生产流程</h5>
                            <p class="text-sm text-gray-500">用工程师思维优化写作效率</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">从想法到发布：我的文章生产SOP</h5>
                            <p class="text-sm text-gray-500">让写作变成可重复的系统化流程</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">打造第二大脑：我的知识管理系统</h5>
                            <p class="text-sm text-gray-500">从信息收集到知识沉淀的完整流程</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">如何让读书笔记产生复利</h5>
                            <p class="text-sm text-gray-500">建立可检索、可连接的知识网络</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">AI如何改变我的写作流程</h5>
                            <p class="text-sm text-gray-500">让AI成为你的写作助手</p>
                        </div>
                    </div>
                </div>
                
                <!-- 长期主义 -->
                <div class="mb-12">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
                            <i class="fas fa-seedling"></i>
                        </div>
                        <h4 class="text-xl font-semibold text-gray-800">长期主义</h4>
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">长期主义者的思维模型</h5>
                            <p class="text-sm text-gray-500">如何用复利思维规划人生和事业</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">为什么我选择做一个慢慢变富的人</h5>
                            <p class="text-sm text-gray-500">时间是最大的财富杠杆</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">技术人的长期主义路径</h5>
                            <p class="text-sm text-gray-500">从代码到资产的思维转换</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">用系统思维做投资：我的投资框架</h5>
                            <p class="text-sm text-gray-500">把投资当作系统工程来管理</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">投资笔记系统：如何记录和复盘投资决策</h5>
                            <p class="text-sm text-gray-500">建立自己的投资知识库</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">从程序员到投资者：技术思维的迁移</h5>
                            <p class="text-sm text-gray-500">如何用编程思维理解市场</p>
                        </div>
                    </div>
                </div>
                
                <!-- 创作变现 -->
                <div class="mb-12">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                            <i class="fas fa-coins"></i>
                        </div>
                        <h4 class="text-xl font-semibold text-gray-800">创作变现</h4>
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">如何把写作变成可持续的收入来源</h5>
                            <p class="text-sm text-gray-500">创作者经济的商业模式探索</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">我是如何通过知识产品赚到第一桶金的</h5>
                            <p class="text-sm text-gray-500">从技术到产品的变现路径</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">什么是真正的在线资产</h5>
                            <p class="text-sm text-gray-500">区分流量与资产的本质差异</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">如何用数字产品构建被动收入</h5>
                            <p class="text-sm text-gray-500">从想法到产品的完整路径</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">技术人如何建立个人品牌</h5>
                            <p class="text-sm text-gray-500">从技术博客到影响力建设</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">社群运营的复利思维</h5>
                            <p class="text-sm text-gray-500">如何打造有价值的创作者社群</p>
                        </div>
                    </div>
                </div>
                
                <!-- AI与技术 -->
                <div class="mb-12">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h4 class="text-xl font-semibold text-gray-800">AI与技术</h4>
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">技术人如何利用AI提升创作效率</h5>
                            <p class="text-sm text-gray-500">从工具使用到思维升级</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">我用过的最有用的AI工具清单</h5>
                            <p class="text-sm text-gray-500">实测推荐的AI工具组合</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">从工程师到创作者：技能迁移的思考</h5>
                            <p class="text-sm text-gray-500">如何让技术背景成为创作优势</p>
                        </div>
                        <div class="article-card bg-white p-6 shadow rounded-lg">
                            <h5 class="font-medium text-gray-800 mb-2">用代码思维构建知识体系</h5>
                            <p class="text-sm text-gray-500">程序员的独特学习方法论</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Creator System Section -->
        <section id="creator-system" class="bg-sky-50 rounded-xl p-8 mb-12">
            <div class="max-w-4xl mx-auto">
                <h3 class="text-2xl font-bold text-gray-800 mb-6">复利型创作系统</h3>
                <p class="text-gray-600 mb-6">一套完整的长期主义创作框架，帮你构建可持续的创作资产。</p>
                
                <div class="grid md:grid-cols-3 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="w-12 h-12 rounded-full bg-sky-100 flex items-center justify-center text-sky-600 mb-4">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h4 class="font-semibold text-gray-800 mb-2">系统化思维</h4>
                        <p class="text-sm text-gray-600">
                            用工程师的系统思维构建创作流程，让每一篇文章都成为可复用的资产，形成知识的复利效应。
                        </p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="w-12 h-12 rounded-full bg-sky-100 flex items-center justify-center text-sky-600 mb-4">
                            <i class="fas fa-infinity"></i>
                        </div>
                        <h4 class="font-semibold text-gray-800 mb-2">长期主义视角</h4>
                        <p class="text-sm text-gray-600">
                            不追求短期流量，专注构建能够持续产生价值的内容资产。每个创作都是为了10年后的自己。
                        </p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <div class="w-12 h-12 rounded-full bg-sky-100 flex items-center justify-center text-sky-600 mb-4">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <h4 class="font-semibold text-gray-800 mb-2">网络化连接</h4>
                        <p class="text-sm text-gray-600">
                            建立写作、投资、产品之间的有机连接，让不同领域的知识相互促进，产生1+1>2的效果。
                        </p>
                    </div>
                </div>
                
                <div class="mt-8 text-center">
                    <a href="./index.html#services" class="bg-sky-500 hover:bg-sky-600 text-white font-medium py-3 px-6 rounded-lg transition-colors inline-block">
                        了解完整系统 →
                    </a>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-slate-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <img src="./src/assets/WLA-logo.png" alt="Logo" class="h-8">
                </div>
                <div class="text-sm text-slate-400">
                    <p>© 2025 无用之木 WengLean. All rights reserved.</p>
                    <p class="mt-2">长期主义创作者 · AI工程师 · 知识系统建设者</p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.getElementById('mobileMenuButton').addEventListener('click', function() {
            document.getElementById('mobileMenu').classList.toggle('active');
            this.querySelector('i').classList.toggle('fa-bars');
            this.querySelector('i').classList.toggle('fa-times');
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    const mobileMenu = document.getElementById('mobileMenu');
                    if (mobileMenu.classList.contains('active')) {
                        mobileMenu.classList.remove('active');
                        document.getElementById('mobileMenuButton').querySelector('i').classList.toggle('fa-bars');
                        document.getElementById('mobileMenuButton').querySelector('i').classList.toggle('fa-times');
                    }
                }
            });
        });

        // Add hover effects to article cards
        document.querySelectorAll('.article-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.borderLeft = '4px solid #0ea5e9';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.borderLeft = 'none';
            });
        });
    </script>
</body>
</html>